<template>
 <div id="mine">
 <!--头部 -->
<div class="shezhi">
    <div class="shezhi-1">
        <ul class="shezhi-1-1">
            <li><img src="../../imgs/duihuaqipao.png" alt=""></li>
            <li><img src="../../imgs/shezhibiao.png" alt=""></li>
        </ul>
    </div>
    <div class="shezhi-2">
     <ul class="shezhi-2-1">
         <li>
             <span>--</span>
             <i>会员等级</i>
         </li>
         <li>
             <img width="60" height="60" src="http://m.static.laiyifen.com/images/logo-laiyifen.png?v=1498042871535">
         </li>
         <li>
             <span>--</span>
             <i class="shezhi-2-2">伊豆</i>
         </li>

     </ul>
    </div>
    <div class="shezhi-3">

        <span>登录</span>
        <span>/</span>
        <span>注册</span>
    </div>
 </div>

<!-- 我的订单 -->
<div class="dingdan">

    <div class="dingdan-1">
        <div>
        <i class="dingdan-1-1"><img src="../../imgs/jishiben1.png" alt=""></i>
        <span class="dingdan-1-3">我的订单</span>
        </div>
        <span class="dingdan-2" >
        全部订单
        <i dingdan-1-2>></i>
        </span>

    </div>
    <div class="dingdan-3">
        <ul>
            <li>
            <i class="dingdan-3-1"></i>
            <div>
                <i>代付款</i>
            </div>
            </li>
            <li>
                <i class="dingdan-3-2"></i>
            <div>
                <i>代发货</i>
            </div>
            </li>
            <li>
                <i class="dingdan-3-3"></i>
            <div>
                <i>待收货</i>
            </div>
            </li>
            <li>
                <i class="dingdan-3-4"></i>
            <div>
                <i>待评价</i>
            </div>
            </li>
             <li>
                <i class="dingdan-3-5"></i>
            <div>
                <i>退换货</i>
            </div>
            </li>
        </ul>
    </div>

<!--  -->


</div>

 </div>

</template>

<script>
export default {

 	name:"Ball"

}
</script>


<style scoped >
.shezhi{
    width: 100%;
    height: 1.6rem;
    background:-webkit-linear-gradient(top,#ffb300,#ff6c00);
}
.shezhi-1-1{
    display:flex;
    justify-content:flex-end;
    align-items:center;
}

.shezhi-1-1 img{
    width: 0.3rem;
    height:0.3rem;
    margin: 0.11rem 0.05rem;
}


.shezhi-2{
    display:-webkit-box;
    width: 100%;
    justify-content:center;

}
.shezhi-2-1{
    display:flex ;

}
.shezhi-2-1 img{
    width: .64rem;
    height: .64rem;
}
.shezhi-2-1 i{
    color: #fff;
    font-size: 0.12rem;
    display: block;
    margin-top: 0.05rem;
}
.shezhi-2-1 span{
    display: block;
    border-radius: 0.17rem;
    background: #ffc600;
    color: #fff;
    font-size: 0.14rem;
    min-width: 0.5rem;
    text-align:center;
    margin:0.15rem 0 0 0;
}
.shezhi-2-2{
    margin-left:.1rem;
}
.shezhi-2-1 li:nth-child(2){
    margin: 0 0.3rem;
}
.shezhi-3{
    display: flex;
    width: 100%;
    height: .12rem;
   justify-content:center;
   margin:.06rem  0  0 .01rem;
}
.shezhi-3 span{
    color:#fff;
    font-size:.16rem;
}
.shezhi-3 span:nth-child(2){
    margin: 0 .03rem;
}

/* 我的订单 */

.dingdan{
    width: 100%;
    height: .37rem;
    border-bottom:.01rem solid #e0e0e0;
    align-items:center;

}
.dingdan-1{
    display:flex;
    justify-content:space-between;
    margin-top:.1rem;
}
.dingdan-1-1 img{
width: .17rem;
height: .18rem;
margin: 0 .1rem .1rem 0.1rem;
}
.dingdan-1-3{
    font-size:.2rem;
}
.dingdan-2{
    margin-right:.2rem;
    font-size:.16rem;
}

.dingdan-3 ul{
    display:flex;
    justify-content:space-around;
    text-align:center;
}

.dingdan-3 li{
    margin-top:.3rem;
}

.dingdan-3-1{
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 25px;
    background: url('http://m.static.laiyifen.com/images/icons-au.png?v=1498042871535');
    background-position: 0px -95px;
    background-repeat: no-repeat;
    background-size: 335px auto;
}
.dingdan-3-2{
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 25px;
    background: url('http://m.static.laiyifen.com/images/icons-au.png?v=1498042871535');
    background-position: 0px -126px;
    background-repeat: no-repeat;
    background-size: 335px auto;
}
.dingdan-3-3{
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 25px;
    background: url('http://m.static.laiyifen.com/images/icons-au.png?v=1498042871535');
    background-position: 0px -157px;
    background-repeat: no-repeat;
    background-size: 335px auto;
}
.dingdan-3-4{
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 25px;
    background: url('http://m.static.laiyifen.com/images/icons-au.png?v=1498042871535');
    background-position: 0px -189px;
    background-repeat: no-repeat;
    background-size: 335px auto;
}
.dingdan-3-5{
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 25px;
    background: url('http://m.static.laiyifen.com/images/icons-au.png?v=1498042871535');
    background-position: 0px -222px;
    background-repeat: no-repeat;
    background-size: 335px auto;
}
</style>